<template>
	<view class="">
		<view class="upload-box">
			<!-- 旧数据 -->
			<view class="upload-item" v-for="(item, idx) in fileListOld" :key="idx">
				<img class="preview" mode="aspectFill" :src="item.url" v-if="item.fileType == 'image'" @click="preview(item)" />
				<view class="preview" v-else-if="item.fileType == 'video'" @click="preview(item)">
					<u-icon name="movie" color="#3B75FF" size="26"></u-icon>
					<view class="filetype-desc">视频</view>
				</view>
				<view class="preview" v-else>
					<u-icon name="folder" color="#3B75FF" size="26"></u-icon>
					<view class="filetype-desc">文件</view>
				</view>
				<view class="file-close" @click="delFile(idx, item, 'old')" v-if="!disabled">
					<view class="close-icon">
						<u-icon name="close" color="#ffffff" size="10"></u-icon>
					</view>
				</view>
			</view>

			<view class="upload-item" v-for="(item, idx) in fileList" :key="idx">
				<img class="preview" mode="aspectFill" :src="item.url" v-if="item.fileType == 'image'" @click="preview(item)" />
				<view class="preview" v-else-if="item.fileType == 'video'" @click="preview(item)">
					<u-icon name="movie" color="#3B75FF" size="26"></u-icon>
					<view class="filetype-desc">视频</view>
				</view>
				<view class="preview" v-else>
					<u-icon name="folder" color="#3B75FF" size="26"></u-icon>
					<view class="filetype-desc">文件</view>
				</view>
				<view class="file-close" @click="delFile(idx, item)" v-if="!disabled">
					<view class="close-icon">
						<u-icon name="close" color="#ffffff" size="10"></u-icon>
					</view>
				</view>
			</view>

			<view class="upload-item" @click="uploadClick" v-if="fileListOld.length + fileList.length < count && !disabled">
				<u-icon name="plus" color="#DDE2EE" size="14"></u-icon>
			</view>
		</view>
		<u-action-sheet ref="actionSheet" :actions="list" :show="show" @select="selected" @close="close" safeAreaInsetBottom round cancelText="取消"></u-action-sheet>
		<!-- 文件预览 -->
		<preFileCom :fileObj="fileObj" @onFileSuccess="fileObj = ''"></preFileCom>
	</view>
</template>

<script>
export default {
	name: 'file-upload',
	props: {
		// 类型 1.图片 2.视频 3.图片/视频 4.文件 5.all
		type: {
			type: Number,
			default: 5
		},
		// 文件类型
		typeList: {
			type: Array,
			default: []
		},
		filesList: {
			type: Array,
			default: []
		},
		count: {
			type: Number,
			default: 9
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			list: [
				{
					name: '图片/视频',
					id: 1
				},
				{
					name: '其他文件',
					id: 2
				}
			],
			show: false,
			fileListOld: [],
			fileList: [],
			// 预览文件
			fileObj: null
		};
	},
	mounted() {
		console.log('11111mounted222222222222')
		let fileList = [];
		this.filesList.map((item) => {
			item.file_id = item.file_id || item.id;
			item.url = item.file_url;
			item.fileType = this.isFileUrl(item.file_suffix);
			fileList.push(item);
		});
		this.fileListOld = fileList;
	},
	watch: {
		filesList(val) {
			console.log(val, 'filesList');
			let fileList = [];
			val.map((item) => {
				item.file_id = item.file_id || item.id;
				item.url = item.file_url;
				item.fileType = this.isFileUrl(item.file_suffix);
				fileList.push(item);
				// {
				// 	file_id: item.file_id ? item.file_id : item.id,
				// 	url: item.file_url,
				// 	fileType: this.isFileUrl(item.file_suffix)
				// }
			});
			this.fileListOld = fileList;
		}
	},
	methods: {
		// 预览
		preview(item) {
			let ext = item.url.match(/\.([^.]+)$/)?.[1];
			this.fileObj = {
				file_suffix: ext,
				file_url: item.url
			};
		},
		uploadClick() {
			let that = this;
			if (that.fileListOld.length + that.fileList.length === that.count) return;
			switch (that.type) {
				case 1:
					uni.chooseMedia({
						count: that.count, //限制选择的文件数量
						mediaType: ['image'],
						sourceType: ['album', 'camera'],
						success(res) {
							// console.log(res.tempFiles, 'chooseMedia');
							let files = [];
							res.tempFiles.map((item) => {
								files.push({
									url: item.tempFilePath,
									fileType: item.fileType
								});
							});
							that.selectFile(files);
						}
					});
					break;
				case 2:
					uni.chooseMedia({
						count: that.count, //限制选择的文件数量
						mediaType: ['video'],
						sourceType: ['album', 'camera'],
						maxDuration: 30,
						success(res) {
							// console.log(res.tempFiles, 'chooseMedia');
							let files = [];
							res.tempFiles.map((item) => {
								files.push({
									url: item.tempFilePath,
									fileType: item.fileType
								});
							});
							that.selectFile(files);
						}
					});
					break;
				case 3:
					uni.chooseMedia({
						count: that.count, //限制选择的文件数量
						mediaType: ['image', 'video'],
						sourceType: ['album', 'camera'],
						maxDuration: 30,
						success(res) {
							// console.log(res.tempFiles, 'chooseMedia');
							console.log(that.fileListOld);
							let files = [];
							res.tempFiles.map((item) => {
								files.push({
									url: item.tempFilePath,
									fileType: item.fileType
								});
							});
							that.selectFile(files);
						}
					});
					break;
				case 4:
					wx.chooseMessageFile({
						count: that.count, //限制选择的文件数量
						type: that.typeList.length == 0 ? 'all' : 'file', //非图片和视频的文件,不选默认为all
						extension: that.typeList.length == 0 ? undefined : that.typeList,
						success(res) {
							// console.log(res.tempFiles, 'chooseMessageFile');
							let files = [];
							res.tempFiles.map((item) => {
								files.push({
									url: item.path,
									fileType: item.type
								});
							});
							that.selectFile(files);
						}
					});
					break;
				case 5:
					that.show = true;
					break;
			}
		},
		selectFile(files) {
			files.map((item) => {
				this.fileList.push(item);
			});
			this.$emit('afterRead', files);
		},
		delFile(idx, item, type) {
			this.$emit('delete', {
				index: idx,
				file: item
			});
			if (type == 'old') {
				this.$nextTick(() => {
					this.fileListOld.splice(idx, 1);
				});
			} else {
				this.$nextTick(() => {
					this.fileList.splice(idx, 1);
				});
			}
		},
		close() {
			this.show = false;
		},
		selected(e) {
			console.log(e, 'selected');
			let that = this;
			if (e.id == 1) {
				uni.chooseMedia({
					count: this.count, //限制选择的文件数量
					mediaType: ['image', 'video'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					success(res) {
						console.log(res.tempFiles, 'chooseMedia');
						let files = [];
						res.tempFiles.map((item) => {
							files.push({
								url: item.tempFilePath,
								fileType: item.fileType
							});
						});
						that.selectFile(files);
					}
				});
			} else {
				wx.chooseMessageFile({
					count: this.count, //限制选择的文件数量
					type: that.typeList.length == 0 ? 'all' : 'file', //非图片和视频的文件,不选默认为all
					extension: that.typeList.length == 0 ? undefined : that.typeList,
					success(res) {
						console.log(res.tempFiles, 'chooseMessageFile', that.typeList);
						let files = [];
						res.tempFiles.map((item) => {
							files.push({
								url: item.path,
								fileType: item.type
							});
						});
						that.selectFile(files);
					}
				});
			}
		},

		isFileUrl(fileSuffix) {
			let app = getApp();
			let imgExtensions = app.globalData.imgExtensions;
			let videoExtensions = app.globalData.videoExtensions;

			if (imgExtensions.includes(fileSuffix)) {
				return 'image';
			} else if (videoExtensions.includes(fileSuffix)) {
				return 'video';
			} else {
				return 'file';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.upload-box {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.upload-item {
		width: 110rpx;
		height: 110rpx;
		border-radius: 8rpx;
		border: 2rpx solid #dde2ee;
		margin: 0 10rpx 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;

		.preview {
			width: 100%;
			height: 100%;
			background-color: #f2f2f2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.filetype-desc {
				font-size: 22rpx;
				color: #909193;
				margin-top: 4rpx;
			}
		}

		.file-close {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #373737;
			height: 14px;
			width: 14px;
			display: flex;
			flex-direction: row;
			border-bottom-left-radius: 100px;
			align-items: center;
			justify-content: center;
			z-index: 3;

			.close-icon {
				position: absolute;
				top: 0;
				right: 0;
				transform: scale(0.7);
			}
		}
	}
}
</style>
